<!--
 @description PopPicker
 @fileName index.vue
 @author zengqiongying
 @created 2023-04-20 13:40:01
-->
<template>
  <Popup
    v-model="popShow"
    position="bottom"
    :title="title"
    :show-cancel-button="false"
    :clear="clear"
    @confirm="onSubmit"
    @clear="onClear"
  >
    <qmp-picker
      :show-toolbar="false"
      :columns="columns"
      :default-index="defaultIndex"
      :item-height="54"
      :swipe-duration="50"
      @change="onChange"
    />
  </Popup>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, computed, watch } from 'vue'
  import { Toast } from 'qmp-component'
  import Popup from '@/components/Popup/index.vue'
  interface datasModle {
    columns: any[]
    defaultIndex: number
    curIndex: number
  }
  const none: any[] = [null, undefined, '']
  export default defineComponent({
    name: 'PopPicker',
    components: { Popup },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      list: {
        type: Array,
        default: () => []
      },
      modelValue: {
        type: [String, Number],
        default: ''
      }, // 选中的值
      label: {
        type: String,
        default: ''
      }, // 选中的值的名称
      valueName: {
        // 选项值键名
        type: String,
        default: 'id'
      },
      labelName: {
        // 选项名称键名
        type: String,
        default: ''
      },
      labelFunc: {
        // 选项名称自定义回调方法
        type: Function,
        default: null
      },
      clear: {
        // 是否允许清空
        type: Boolean,
        default: false
      }
    },
    setup(props: any, ctx: any) {
      const datas = reactive<datasModle>({
        columns: [],
        defaultIndex: 0, // 默认选中项索引
        curIndex: 0 // 当前选中项索引
      })
      const popShow = computed({
        set(val) {
          ctx.emit('update:show', val)
        },
        get() {
          return props.show
        }
      })
      const initListData = () => {
        let val = props.modelValue
        if (none.includes(val)) {
          val = ''
        }
        datas.columns = props.list.map((v: any, index: number) => {
          if (val.toString() === v[props.valueName].toString()) {
            datas.curIndex = index
            datas.defaultIndex = index
          }
          return labelSet(v)
        })
      }
      const onChange = (value: any, index: number) => {
        datas.curIndex = index
      }

      const onSubmit = () => {
        const obj: any = props.list[datas.curIndex]
        if (!obj || none.includes(obj[props.valueName])) {
          Toast('请选择')
          return
        }
        const value = obj[props.valueName]
        const label = labelSet(obj)
        ctx.emit('update:modelValue', value)
        ctx.emit('update:label', label)
        ctx.emit('selectChange', obj)
        popShow.value = false
      }
      const onClear = () => {
        datas.curIndex = -1
        ctx.emit('update:modelValue', '')
        ctx.emit('update:label', '')
        ctx.emit('selectChange', '')
        popShow.value = false
      }
      const labelSet = (item: any) => {
        if (props.labelFunc && props.labelFunc instanceof Function) {
          return props.labelFunc(item)
        } else {
          return item[props.labelName]
        }
      }
      watch(
        () => props.modelValue,
        (val) => {
          if (!none.includes(val)) {
            const index = props.list.findIndex((v: any) => v[props.valueName].toString() === val.toString())
            datas.curIndex = index === -1 ? 0 : index
          } else {
            datas.curIndex = 0
            ctx.emit('update:modelValue', '')
            ctx.emit('update:label', '')
          }
        }
      )
      watch(
        () => props.list,
        (val) => {
          initListData()
        },
        {
          deep: true
        }
      )
      initListData()
      return {
        ...toRefs(datas),
        popShow,
        onClear,
        onSubmit,
        onChange
      }
    }
  })
</script>
<style lang="less" scoped>
  /deep/ [class*='van-hairline']::after {
    border-color: #00c8b4;
    border-width: 2px 0;
  }
  /deep/ .van-picker-column__item--selected {
    font-size: 18px;
    font-weight: bold;
  }
</style>
